<template>
    <div v-if='order.orderinfo' class="bg-wrap" style="min-height: 765px;">
                                        <div class="sub-tit">
                                            <a @click="goBack" href="javascript:void(0)" class="add">
                                                <i class="iconfont icon-reply"></i>返回</a>
                                            <ul>
                                                <li class="selected">
                                                    <a href="javascript:;">查看订单</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="order-progress">
                                            <ul>
                                                <li class="first active">
                                                    <div class="progress">下单</div>
                                                    <div class="info">{{order.orderinfo.add_time | dataFmt('YYYY-MM-DD HH:mm:ss')}}</div>
                                                </li>
                                                <li :class="order.orderinfo.status>=2?'active':''">
                                                    <div class="progress">已付款</div>
                                                    <div class="info">{{order.orderinfo.payment_time | dataFmt('YYYY-MM-DD HH:mm:ss')}}</div>
                                                </li>
                                                <li :class="order.orderinfo.status>=3?'active':''">
                                                    <div class="progress">已经发货</div>
                                                    <div class="info">{{order.orderinfo.confirm_time | dataFmt('YYYY-MM-DD HH:mm:ss')}}</div>
                                                </li>
                                                <li :class="['last',order.orderinfo.status>=4?'active':'']">
                                                    <div class="progress">已完成</div>
                                                    <div class="info">{{order.orderinfo.complete_time | dataFmt('YYYY-MM-DD HH:mm:ss')}}</div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div v-if='order.orderinfo' class="form-box accept-box form-box1">
                                            <dl class="head form-group">
                                                <dd>
                                                    订单号：{{order.orderinfo.order_no}}

                                                    <router-link :to="'/site/payOrder/'+order.orderinfo.id" class="btn-pay">去付款</router-link>
                                                    <!---->
                                                </dd>
                                            </dl>
                                            <dl class="form-group">
                                                <dt>订单状态：</dt>
                                                <dd>
                                                    {{order.orderinfo.statusName}}
                                                </dd>
                                            </dl>
                                            <dl class="form-group">
                                                <dt>快递单号：</dt>
                                                <dd>

                                                </dd>
                                            </dl>
                                            <dl class="form-group">
                                                <dt>支付方式：</dt>
                                                <dd>{{order.orderinfo.paymentTitle}}</dd>
                                            </dl>
                                        </div>
                                        <div class="table-wrap">
                                            <table width="100%" border="0" cellspacing="0" cellpadding="5" class="ftable">
                                                <tbody>
                                                    <tr>
                                                        <th align="left">商品信息</th>
                                                        <th width="60%">名称</th>
                                                        <th width="10%">单价
                                                        </th>
                                                        <th width="10%">数量</th>
                                                        <th width="10%">金额</th>
                                                    </tr>
                                                    <tr v-for='item in order.goodslist' :key='item.id'>
                                                        <td width="60">
                                                            <img :src="item.imgurl" class="img">
                                                        </td>
                                                        <td align="left">
                                                            <a target="_blank" href="/goods/show-92.html">{{item.goods_title}}</a>
                                                        </td>
                                                        <td align="center">
                                                            <s>￥{{item.goods_price}}</s>
                                                            <p>￥{{item.real_price}}</p>
                                                        </td>
                                                        <td align="center">{{item.quantity}}</td>
                                                        <td align="center">￥{{item.real_price * item.quantity}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="7" align="right">
                                                            <p>商品金额：
                                                                <b class="red">￥{{goodsTotalAmount}}</b>&nbsp;&nbsp;+&nbsp;&nbsp;运费：
                                                                <b class="red">￥{{order.orderinfo.express_fee}}</b>
                                                            </p>
                                                            <p style="font-size: 22px;">应付总金额：
                                                                <b class="red">￥{{totalAmount}}</b>
                                                            </p>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div v-if='order.orderinfo' class="form-box accept-box">
                                            <dl class="head form-group">
                                                <dd>收货信息</dd>
                                            </dl>
                                            <dl class="form-group">
                                                <dt>顾客姓名：</dt>
                                                <dd>{{order.orderinfo.accept_name}}</dd>
                                            </dl>
                                            <dl class="form-group">
                                                <dt>送货地址：</dt>
                                                <dd>{{order.orderinfo.area}} {{order.orderinfo.address}}</dd>
                                            </dl>
                                            <dl class="form-group">
                                                <dt>联系电话：</dt>
                                                <dd>{{order.orderinfo.mobile}} </dd>
                                            </dl>
                                            <dl class="form-group">
                                                <dt>电子邮箱：</dt>
                                                <dd> {{order.orderinfo.email}}</dd>
                                            </dl>
                                            <dl class="form-group">
                                                <dt>备注留言：</dt>
                                                <dd>{{order.orderinfo.message}}</dd>
                                            </dl>
                                        </div>
                                    </div>
</template>


<script>
    export default {
        data(){
            return {
                order:{},
                goodsTotalAmount:0,
                totalAmount:0
            }
        },
        created(){
            this.getOrderInfo();
        },
        methods:{
            getOrderInfo(){
                const url = `site/validate/order/getorderdetial/${this.$route.params.orderId}`;
                this.$axios.get(url).then(response=>{
                    // console.log(response.data);
                    let tempTotal = 0;
                    response.data.message.goodslist.forEach(item=>{
                        tempTotal+= item.quantity * item.real_price;
                        
                    })
                    this.goodsTotalAmount = tempTotal;
                    this.totalAmount = this.goodsTotalAmount + response.data.message.orderinfo.express_fee;

                    this.order = response.data.message;
                })
            },
            goBack(){
                this.$router.go(-1);
            }
        }
    }
</script>
